<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>石油大学软件缺陷管理系统</title>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <script src="js/jquery.js"></script>
    <script src="js/layer.js"></script>
</head>
<style>
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("img/bg4.jpeg");
        /* 设置背景图片透明度 */
        opacity: 0.1;
        z-index: -1; /* 将伪元素放置于页面下方 */
    }
</style>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header  layui-bg-blue">
        <div class="layui-logo  layui-bg-blue layui-nav-img"
             style="font-weight: bold;font-size: 17px">
            <img src="img/bg3.jpg" alt="logo" style="width: 55px; height: auto;">
            石油大学软件缺陷管理系统</div>
        <ul class="layui-nav layui-layout-left"></ul>
        <c:if test="${loginUser==null}">
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item"><a href="login.jsp">请登录</a></li>
            </ul>
        </c:if>
        <c:if test="${loginUser!=null}">
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item"><a>${loginUser.username}</a></li>
                <li class="layui-nav-item"><a href="authLogout">退出登录</a></li>
            </ul>
        </c:if>
    </div>

    <div class="layui-side layui-bg-blue">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <!-- 侧边栏 -->
                <jsp:include page="menu.jsp">
                    <jsp:param value="active" name="Bug_active"/>
                </jsp:include>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <div class="search_style" style="padding-top: 10px;padding-left: 15px;">
            <div class="layui-form layui-row layui-col-space10">
                <div class="layui-col-md3 searchTable0">
                    搜索：
                    <div class="layui-inline">
                        <input class="layui-input" name="search_keyword" id="search_keyword" autocomplete="off" placeholder="BUG标题">
                        <input type="hidden" class="layui-input" name="searchColumn" id="searchColumn" autocomplete="off" value="bugTitle">
                    </div>
                    <button class=" layui-btn layui-bg-blue" data-type="reload" >搜索</button>
                </div>
                <div class="layui-col-md3 searchTable4">
                    <div class="layui-inline">
                        <input class="layui-input" name="search_keyword4" id="search_keyword4" autocomplete="off" placeholder="提交人员">
                        <input type="hidden" class="layui-input" name="searchColumn4" id="searchColumn4" autocomplete="off" value="fromUser">
                    </div>
                    <button class="layui-btn layui-bg-blue" data-type="reload" >搜索</button>
                </div>
                <div class="layui-col-md1 layui-inline ">
                    <select id="search_keyword1">
                        <option id="searchColumn1" value="fixWay" disabled selected>解决形式</option>
                        <option value="1" >1：解决</option>
                        <option value="2">2：不是错误</option>
                        <option value="3">3：错误重复</option>
                        <option value="4">4：无法重现</option>
                        <option value="">全部</option>
                    </select>
                </div>
                <div class="searchTable1 layui-col-md1 layui-inline">
                    <button class="layui-btn  layui-bg-blue" data-type="reload" >确定</button>
                </div>
                <div class="layui-col-md1 layui-inline ">
                    <select id="search_keyword2">
                        <option id="searchColumn2" value="status" disabled selected>BUG状态</option>
                        <option value="已修复" >已修复</option>
                        <option value="待修复">待修复</option>
                        <option value="已关闭">已关闭</option>
                        <option value="">全部</option>
                    </select>
                </div>
                <div class="searchTable2 layui-col-md1 layui-input-inline">
                    <button class="layui-btn layui-bg-blue" data-type="reload" >确定</button>
                </div>
                <div class="layui-col-md1 layui-inline ">
                    <select id="search_keyword3">
                        <option id="searchColumn3" value="bugLevel" disabled selected>BUG等级</option>
                        <option value="1" >1：轻微</option>
                        <option value="2">2：次要</option>
                        <option value="3">3：一般</option>
                        <option value="4">4：紧急</option>
                        <option value="5">5：严重</option>
                        <option value="">全部</option>
                    </select>
                </div>
                <div class="searchTable3 layui-col-md1 layui-input-inline">
                    <button class="layui-btn layui-bg-blue" data-type="reload" >确定</button>
                </div>
            </div>
        </div>
        <!-- 内容主体区域 -->
        <table class="layui-hide" id="myData" lay-filter="myTable"></table>
    </div>
</div>
<script src="js/layui/layui.js"/>
<script>
    //JavaScript代码区域
    layui.use('element', function () {
        let element = layui.element;
    });
</script>
<script type="text/html" id="myToolbar">
    <div class="layui-btn-container">
        <%--<c:if test="${loginUser.userType == '管理员'}"><button class='layui-btn layui-btn-sm  layui-bg-blue' lay-event='add'>添加</button></c:if>--%>
        <button class='layui-btn layui-btn-sm  layui-bg-blue' lay-event='add'>添加</button>
    </div>
</script>
<script>
    let funcList = [];
    $.ajax({
        url: 'getFunctionByUserId',
        data: {userId: ${loginUser.id}},
        dataType: 'json',
        type: 'get',
        async: false,
        success: function (data) {

            for (const x of data) {
                funcList.push(x.funcId)
            }
            console.log(funcList)
        }
    })
    function arrayBufferToBase64(buffer) {
        let binary = '';
        let bytes = new Uint8Array(buffer);
        let len = bytes.byteLength;
        for (let i = 0; i < len; i++) {
            binary += String.fromCharCode(bytes[i]);
        }
        return window.btoa(binary);
    }

    layui.use('table', function () {
        let table = layui.table;
        table.render({
            elem: '#myData',
            id: 'myTable',
            url: 'bugList',
            parseData: function (res) { //res：即为原始返回的数据
                let result = this.page.curr ? res.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr) : res.slice(0, this.limit);
                return {
                    "code": 0, //解析接口状态
                    "msg": '', //解析提示文本
                    "count": res.length, //解析数据长度（集合个数）
                    "data": result //解析数据列表
                };
            },
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局
                groups: 1, //显示1 个连续页码
                first: false, //不显示首页
                last: false, //不显示尾页
            },
            toolbar: '#myToolbar', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            even: true,
            title: 'bug列表',
            cols: [
                [
                    {
                        field: 'bugName',
                        title: 'BUG标题',
                        templet: vo => (vo = vo.bugName) ? '<a href="#" style="color: red;">' + vo + '</a>' : '',
                        event: 'info',
                    },
                    {
                        field: 'proName',
                        title: '项目名称',
                    },
                    {
                        field: 'funcId',
                        title: '模块ID',
                    },
                    {
                        field: 'bugDev',
                        title: '提交人员',
                    },
                    {
                        field: 'bugDate',
                        title: '创建日期',
                    },
                    {



                        field: 'bugStatus',
                        title: 'BUG状态',
                        templet: vo => vo.bugStatus ? vo.bugStatus : "",
                    },
                    {
                        field: 'bugLevel',
                        title: 'BUG等级',
                        templet: vo => vo.bugLevel ? vo.bugLevel : "",
                    },
                    {
                        field: 'fixWay',
                        title: '解决方式',
                    },
                    {
                        field: 'bugText',
                        title: '备注',
                    },
                    {
                        align: 'center',
                        fixed: 'right',
                        title: '操作',
                        width: 130,
/*                        templet: vo => {
                            let flag = ${loginUser.userType == '管理员'};
                            return flag ? '<a class="layui-btn layui-btn-xs  layui-bg-blue" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>' : '';
                        }*/
                        templet: function (d){

                            //判断是否是该用户负责开发的功能
                            let flag = false;
                            for (const x of funcList) {
                                if (d.funcId == x ) {
                                    flag = true;
                                }
                            }
                            if(d.bugDev == "${loginUser.username}" || "${loginUser.userType}" == "管理员"){
                                return '<a class="layui-btn layui-btn-xs  layui-bg-blue" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                            }else if (flag){
                                //负责开发的人员不能删除bug
                                return '<a class="layui-btn layui-btn-xs  layui-bg-blue" lay-event="edit">编辑</a>';
                            }
                            else {
                                return '';
                            }

                        }
                    }
                ]
            ],
        });
        //监听工具条
        table.on('tool(myTable)', function (obj) { //注：tool 是工具条事件名，myTable 是 table 原始容器的属性 lay-filter="对应的值"
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (layEvent === 'del') { //删除
                // layer.confirm('删除' + data.bugName + "?", function (index) {
                $.ajax({
                    type: "GET",
                    dataType: "text",
                    url: "bugDelete?id=" + data.id,
                    success: function () {
                        console.log("已删除！");
                    }
                });
                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                //parent.location.reload();//刷新父级页面
                // layer.close(index);
                //parent.location.reload();//刷新父级页面
                layer.msg(data.bugName + ' 删除成功！');
                // });
            } else if (layEvent === 'edit') { //编辑
                layer.open({
                    type: 2,
                    area: ['800px', '550px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: 'bugEditPre?id=' + data.id
                });
                obj.update({});//同步更新缓存对应的值
            } else if (layEvent === 'info') { //详情
                layer.open({
                    type: 2,
                    area: ['800px', '650px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: 'bugGet?id=' + data.id
                });
                obj.update({});//同步更新缓存对应的值
            } else if (layEvent === 'LAYTABLE_TIPS') {
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });
        //头工具栏事件
        table.on('toolbar(myTable)', function (obj) {
            if ('add' == obj.event) {
                layer.msg('添加');
                layer.open({
                    type: 2,
                    area: ['800px', '550px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: 'bug_add.jsp'
                });
            } else {
                //layer.alert('这是工具栏右侧自定义的一个图标按钮');
            }
        });
        //搜索
        let $ = layui.$, active0 = {//通过bug标题搜索
            reload: function () {
                let url = 'bugList?keyword=' + $('#search_keyword').val() + '&searchColumn=' + $('#searchColumn').val();
                //执行重载
                table.reload('myTable', {
                    url: url,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        },active4 = {//通过提交人员搜索
            reload: function () {
                let url = 'bugList?keyword=' + $('#search_keyword4').val() + '&searchColumn=' + $('#searchColumn4').val();
                //执行重载
                table.reload('myTable', {
                    url: url,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        }, active1 = {//通过解决形式搜索
            reload: function () {
                let url = 'bugList?keyword=' + $('#search_keyword1').val() + '&searchColumn=' + $('#searchColumn1').val();
                //执行重载
                table.reload('myTable', {
                    url: url,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        },active2 = {//通过bug状态搜索
            reload: function () {
                let url = 'bugList?keyword=' + $('#search_keyword2').val() + '&searchColumn=' + $('#searchColumn2').val();
                //执行重载
                table.reload('myTable', {
                    url: url,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        },active3 = {//通过bug等级搜索
            reload: function () {
                let url = 'bugList?keyword=' + $('#search_keyword3').val() + '&searchColumn=' + $('#searchColumn3').val();
                //执行重载
                table.reload('myTable', {
                    url: url,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        };
        //监听点击事件
        $('.searchTable0 .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active0[type] ? active0[type].call(this) : '';
        });
        $('.searchTable4 .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active4[type] ? active4[type].call(this) : '';
        });
        $('.searchTable1 .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active1[type] ? active1[type].call(this) : '';
        });
        $('.searchTable2 .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active2[type] ? active2[type].call(this) : '';
        });
        $('.searchTable3 .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active3[type] ? active3[type].call(this) : '';
        });
    });
</script>
</body>
</html>

